<template>
  <div class="internship-report" >
    <div id="printArea" class="print-area">
    <header class="report-header">
      <h1>{{ queryParams.school }}<br />{{ queryParams.degree }}毕业实习报告</h1>
    </header>

    <!-- 基本信息区域 -->
    <div class="info-container">
      <div class="info-section">
        <div class="info-item">
          <label>教学单位：</label>
          <!-- 编辑状态：显示输入框 -->
          <input
            v-if="isEditing"
            type="text"
            v-model="queryParams.school"
            class="input-field"
          />
          <!-- 查看/打印状态：显示带下划线的文本 -->
          <span
            v-else
            class="display-text"
          >
    {{ queryParams.school }}
  </span>
        </div>
        <div class="info-item">
          <label>专&nbsp;&nbsp;&nbsp;&nbsp;业：</label>
          <!-- 编辑状态：显示输入框 -->
          <input
            v-if="isEditing"
            type="text"
            v-model="queryParams.major"
            class="input-field"
          />
          <!-- 查看/打印状态：显示带下划线的文本 -->
          <span
            v-else
            class="display-text"
          >
    {{ queryParams.major }}
  </span>
        </div>
        <div class="info-item">
          <label>班&nbsp;&nbsp;&nbsp;&nbsp;级：</label>
          <!-- 编辑状态：显示输入框 -->
          <input
            v-if="isEditing"
            type="text"
            v-model="queryParams.className"
            class="input-field"
          />
          <!-- 查看/打印状态：显示带下划线的文本 -->
          <span
            v-else
            class="display-text"
          >
    {{ queryParams.className }}
  </span>
        </div>
        <div class="info-item">
          <label>姓&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
          <!-- 编辑状态：显示输入框 -->
          <input
            v-if="isEditing"
            type="text"
            v-model="queryParams.studentName"
            class="input-field"
          />
          <!-- 查看/打印状态：显示带下划线的文本 -->
          <span
            v-else
            class="display-text"
          >
    {{ queryParams.studentName }}
  </span>
        </div>
        <div class="info-item">
          <label>学&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
          <!-- 编辑状态：显示输入框 -->
          <input
            v-if="isEditing"
            type="text"
            v-model="queryParams.studentNo"
            class="input-field"
          />
          <!-- 查看/打印状态：显示带下划线的文本 -->
          <span
            v-else
            class="display-text"
          >
    {{ queryParams.studentNo }}
  </span>
        </div>
        <div class="info-item">
          <label>实习单位：</label>
          <!-- 编辑状态：显示输入框 -->
          <input
            v-if="isEditing"
            type="text"
            v-model="queryParams.internshipCompany"
            class="input-field"
          />
          <!-- 查看/打印状态：显示带下划线的文本 -->
          <span
            v-else
            class="display-text"
          >
    {{ queryParams.internshipCompany }}
  </span>
        </div>
        <div class="info-item">
          <label>实习日期：</label>
          <!-- 编辑状态：显示输入框 -->
          <input
            v-if="isEditing"
            type="text"
            v-model="queryParams.internshipPeriod"
            class="input-field"
          />
          <!-- 查看/打印状态：显示带下划线的文本 -->
          <span
            v-else
            class="display-text"
          >
    {{ queryParams.internshipPeriod }}
  </span>
        </div>
      </div>
    </div>
    <footer class="report-footer">
      {{ queryParams.school }}教务处
    </footer>
    <div class="page-break"></div>

    <div class="task-book" v-for="task in taskData" :key="task.id">
      <h2>毕业实习任务书</h2>
      <table class="task-table">
        <tr>
          <td class="label-cell">姓名</td>
          <td><input type="text" v-model="queryParams.studentName" /></td>
          <td class="label-cell">学号</td>
          <td><input type="text" v-model="queryParams.studentNo" /></td>
          <td class="label-cell">专业</td>
          <td><input type="text" v-model="queryParams.major" /></td>
        </tr>
        <tr>
          <td class="label-cell">实习时间</td>
          <td colspan="5">
            <input type="text" v-model="queryParams.internshipPeriod" />
          </td>
        </tr>
        <tr>
          <td class="label-cell">实习单位</td>
          <td colspan="5"><input type="text" v-model="queryParams.internshipCompany"/></td>
        </tr>
        <tr>
          <td class="label-cell">实习岗位</td>
          <td colspan="5"><input type="text" v-model="queryParams.internshipPosition"/></td>
        </tr>
        <tr>
          <td class="label-cell">指导教师</td>
          <td colspan="5"><input type="text" v-model="queryParams.instructorTeacher"/></td>
        </tr>
        <tr>
          <td class="label-cell">企业导师或<br/>部门负责人</td>
          <td colspan="5"><input type="text" v-model="queryParams.enterpriseMentor"/></td>
        </tr>

        <!-- 实习目标 -->
        <tr>
          <td colspan="6" class="section-title">
            <div>一、实习目标</div>
            <!-- 用 div 显示 HTML 内容，点击弹窗 -->
            <div
              class="fake-textarea clickable"
              @click="openEditor('objective',task)"
              v-html="task.internshipObjective || '点击编辑实习目标'"
            ></div>
          </td>
        </tr>

        <!-- 实习内容 -->
        <tr>
          <td colspan="6" class="section-title">
          <div>二、实习内容</div>
            <div
              class="fake-textarea clickable"
              @click="openEditor('content',task)"
              v-html="task.internshipContent || '点击编辑实习内容'"
            ></div>
          </td>
        </tr>

        <!-- 实习计划 -->
        <tr>
          <td colspan="6" class="section-title">
          <div>三、实习计划或安排</div>
            <div
              class="fake-textarea clickable"
              @click="openEditor('plan',task)"
              v-html="task.internshipPlan || '点击编辑实习计划'"
            ></div>
          </td>
        </tr>

        <!-- 实习要求 -->
        <tr>
          <td colspan="6" class="section-title">
          <div>四、实习要求</div>
            <div
              class="fake-textarea clickable"
              @click="openEditor('requirements',task)"
              v-html="task.internshipRequirements || '点击编辑实习要求'"
            ></div>
          </td>
        </tr>

        <tr>
          <td class="label-cell">学生签名</td>
          <td><input type="text" v-model="task.studentSignature"/></td>
          <td class="label-cell" colspan="2">指导教师签名</td>
          <td colspan="2"><input type="text" v-model="task.advisorSignature"/></td>
        </tr>
      </table>
    </div>
      <!-- 富文本编辑弹窗 -->
      <div v-if="showEditor" class="modal-overlay">
        <div class="modal-content">
          <h4>{{ getEditorTitle() }}</h4>

          <!-- 富文本编辑区 -->
          <div
            ref="richEditor"
            class="rich-text-editor"
            contenteditable="true"
            v-html="editorContent"
          ></div>

          <div class="modal-footer">
            <button @click="closeEditor">取消</button>
            <button @click="saveEditor" class="btn-primary">保存</button>
          </div>
        </div>
      </div>
    <div class="page-break"></div>

    <div class="evaluation-form" v-for="evaluation in evaluationData" :key="evaluation.id">
      <h2>毕业实习成绩鉴定表</h2>
      <table class="evaluation-table">
        <tr>
          <td>姓名</td>
          <td><input type="text" v-model="queryParams.studentName"/></td>
          <td>学号</td>
          <td><input type="text" v-model="queryParams.studentNo"/></td>
          <td>专业</td>
          <td><input type="text" v-model="queryParams.major"/></td>
        </tr>

        <!-- 实习生自我鉴定 -->
        <tr>
          <td class="section-title">实习生<br/>自我鉴定
            <td colspan="5">
            <!-- ✅ 改为可点击的富文本区域 -->
            <div
              class="fake-textarea clickable"
              @click="openEditor('selfEvaluation', evaluation)"
              v-html="evaluation.selfEvaluation || '点击编辑自我鉴定'"
            ></div>
          </td>
        </tr>

        <tr>
          <td rowspan="7" class="section-title">实习单位<br/>意见及<br/>成绩评定</td>
          <td colspan="3">评分标准</td>
          <td>分值</td>
          <td>评分</td>
        </tr>
        <template v-for="(item, index) in evaluation.hrmInternEvalScoreList">
          <tr v-if="item.type === 'company'" :key="`company-${index}`">
            <td colspan="3">{{ item.itemName }}</td>
            <td>{{ item.maxScore }}</td>
            <td>
              <input type="number"
                   v-model="item.score"
                   :max="item.maxScore"
                   min="0"
                   @change="calculateTotalScore('company')"/>
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="3">总分</td>
          <td>{{ getCompanyMaxScore(evaluation) }}</td>
          <td>{{ getCompanyTotalScore(evaluation) }}</td>
        </tr>

        <tr>
          <td colspan="5">
            <div class="assessment-item">
              <label>实习单位意见：</label>
              <textarea v-model="evaluation.companyOpinion" rows="3"></textarea>
            </div>
            <!-- 签名行：左为负责人，右为盖章 -->
            <div class="signature-row">
              <div class="signature-left">
                <span>企业导师或实习单位负责人：</span>
              </div>
              <div class="signature-right">
                <span class="signature-box">(实习单位盖章)</span>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td rowspan="7" class="section-title">指导教师<br/>意见及<br/>成绩评定</td>
          <td colspan="3">评分标准</td>
          <td>分值</td>
          <td>评分</td>
        </tr>
        <template v-for="(item, index) in evaluation.hrmInternEvalScoreTeacherList">
          <tr v-if="item.type === 'teacher'" :key="`teacher-${index}`">
            <td colspan="3">{{ item.itemName }}</td>
            <td>{{ item.maxScore }}</td>
            <td>
              <input type="number"
                     v-model="item.score"
                     :max="item.maxScore"
                     min="0"
                     @change="calculateTotalScore('teacher')"/>
            </td>
          </tr>
        </template>
          <tr>
            <td colspan="3">总分</td>
            <td>{{ getTeacherMaxScore(evaluation) }}</td>
            <td>{{ getTeacherTotalScore(evaluation) }}</td>
          </tr>

        <tr>
          <td colspan="5">
            <div class="assessment-item">
              <label>指导教师意见：</label>
              <textarea v-model="evaluation.companyOpinion" rows="3"></textarea>
            </div>
            <!-- 签名行：左为负责人，右为盖章 -->
            <div class="signature-row">
              <div class="signature-left">
                <span>指导教师：</span>
              </div>
              <div class="signature-right">
                <span class="signature-box">(签名)</span>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td class="section-title">成绩等级<br/>评定
          <td colspan="5" class="grade-row">
            <!-- 成绩与等级并排，使用内联块布局 -->
            <div class="form-inline-group">
              <div class="form-item">
                <label>成绩：</label>
                <input type="text" v-model="evaluation.totalScore" class="short-input" readonly/> 分
              </div>
              <div class="form-item">
                <label>等级：</label>
                <input type="text" v-model="evaluation.grade" class="short-input" readonly/>
              </div>
            </div>

            <!-- 签名区域，右对齐 -->
            <div class="signature-area">
              <div class="signature-line">
                <span>教学单位(盖章)：</span>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="page-break"></div>

    <div class="report-content" v-for="report in reportData" :key="report.id">
      <h2>毕业实习报告</h2>
      <table class="report-table">
        <tr>
          <td>姓名</td>
          <td><input type="text" v-model="queryParams.studentName" /></td>
          <td>学号</td>
          <td><input type="text" v-model="queryParams.studentNo" /></td>
          <td>专业</td>
          <td><input type="text" v-model="queryParams.major" /></td>
        </tr>
        <tr>
          <td>实习时间</td>
          <td colspan="5"><input type="text" v-model="queryParams.internshipPeriod" /></td>
        </tr>
        <tr>
          <td>实习单位</td>
          <td colspan="5"><input type="text" v-model="queryParams.internshipCompany" /></td>
        </tr>
        <tr>
          <td>实习岗位</td>
          <td colspan="5"><input type="text" v-model="queryParams.internshipPosition" /></td>
        </tr>
        <tr>
          <td>指导教师</td>
          <td colspan="5"><input type="text" v-model="queryParams.instructorTeacher"/></td>
        </tr>
        <tr>
          <td>企业导师或<br/>部门负责人</td>
          <td colspan="5"><input type="text" v-model="queryParams.enterpriseMentor"/></td>
        </tr>
        <!-- 实习目的 -->
        <tr>
          <td colspan="6" class="section-title">
            <div>一、实习目的</div>
            <div
              class="fake-textarea clickable"
              @click="openEditor('internshipPurpose', report)"
              v-html="report.internshipPurpose || '点击编辑实习目的'"
            ></div>
          </td>
        </tr>

        <!-- 实习内容  -->
        <tr>
          <td colspan="6" class="section-title">
            <div>二、实习内容</div>
            <div
              class="fake-textarea clickable"
              @click="openEditor('internshipContent', report)"
              v-html="report.internshipContent || '点击编辑实习内容'"
            ></div>
          </td>
        </tr>

        <!-- 实习经历 -->
        <tr>
          <td colspan="6" class="section-title">
            <div>三、实习经历</div>
            <div
              class="fake-textarea clickable"
              @click="openEditor('internshipExperience', report)"
              v-html="report.internshipExperience || '点击编辑实习经历'"
              ></div>
          </td>
        </tr>

        <!-- 实习体会 -->
        <tr>
          <td colspan="6" class="section-title">
            <div>四、实习体会</div>
            <div
            class="fake-textarea clickable"
            @click="openEditor('internshipReflection', report)"
            v-html="report.internshipReflection || '点击编辑实习体会'"
            ></div>
          </td>
        </tr>
      </table>
    </div>
    <div class="page-break"></div>

    <div class="internship-logs">

      <div class="log-container" v-for="(log, index) in logsData" :key="log.id">
        <h2>毕业实习日志</h2>
        <h3>实习日志</h3>
        <table class="log-table">
          <tr>
<!--          <td colspan="5"><strong>实习日期：</strong>-->
<!--            <input type="text" v-model="log.weekStartDate" placeholder="开始日期" class="date-field"/>-->
<!--            <input type="text" v-model="log.weekEndDate" placeholder="结束日期" class="date-field"/>-->
<!--            </td>-->
            <td colspan="5">
              <strong>实习日期：</strong>
              {{ formatDate(log.weekStartDate) }} 至 {{ formatDate(log.weekEndDate) }}
            </td>
          </tr>
          <tr>
            <td colspan="5"><strong>工作内容和要求：</strong>
              <div
              class="fake-textarea clickable"
              @click="openEditor('workContent', log)"
              v-html="log.workContent || '点击编辑工作内容和要求'"
              ></div>
            </td>
          </tr>
          <tr>
            <td colspan="5"><strong>工作情况记录：</strong>
              <div
                class="fake-textarea clickable"
                @click="openEditor('workRecord', log)"
                v-html="log.workRecord || '点击编辑工作情况记录'"
              ></div>
            </td>
          </tr>
          <tr>
            <td colspan="5"><strong>个人体会或收获：</strong>
              <div
                class="fake-textarea clickable"
                @click="openEditor('personalGain', log)"
                v-html="log.personalGain || '点击编辑个人体会或收获'"
              ></div>
            </td>
          </tr>
        </table>
        <button @click="removeLog(index)" class="delete-btn">删除日志</button>
      </div>
      <button @click="addLog" class="add-btn">添加日志</button>
    </div>
    </div>
    <div class="actions">
    <button @click="saveReport">保存报告</button>
    <button @click="printReport">打印报告</button>
  </div>
  </div>

</template>

<script>
import store from '@/store'
import {listIntern} from "@/api/collegeco/intern";
import {listTask} from "@/api/collegeco/task";
import {listLog} from "@/api/collegeco/log";
import {listInternEvaluation, getInternEvaluation} from "@/api/collegeco/internEvaluation";
import {listReport} from "@/api/collegeco/report";

export default {
  name: 'internshipReport',
  data() {
    return {
      currentTask: null,
      currentEvaluation: null,
      showEditor: false,
      currentField: '',
      editorContent: '',
      isEditing: false, // 设为 true 可编辑，false 则显示为文本
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: store.getters.userId,
        empId: null,
        studentName: null,
        studentNo: null,
        school: null,
        degree: null,
        college: null,
        major: null,
        className: null,
        internshipCompany: null,
        internshipPosition: null,
        internshipStart: null,
        internshipEnd: null,
        instructorTeacher: null,
        enterpriseMentor: null,
        internshipRecord: null,
        status: null,
      },
      // 实习生信息表格数据
      internList: [],

      taskData: [],
      logsData: [],
      evaluationData: [],
      reportData: []
    }
  },
  created() {
    this.queryParams.userId = store.getters.userId;
    // 初始化数据
    this.getList();
    // 数据加载完成后
    this.evaluationData.forEach(item => {
      this.calculateTotalScore(item);
    });
  },

  watch: {
    //监听评分列表变化，自动计算
    hrmInternEvalScoreList: {
      handler() {
        this.calculateTotalScore();
      },
      deep: true  // 必须 deep: true 才能监听到 score 的变化
    },
    hrmInternEvalScoreTeacherList: {
      handler() {
        this.calculateTotalScore();
      },
      deep: true
    }
  },

  methods: {
    formatDate(dateString) {
      if (!dateString) return '';
      return dateString.slice(0, 10);
    },
    getEditorTitle() {
      const titles = {
        objective: '实习目标编辑',
        content: '实习内容编辑',
        plan: '实习计划编辑',
        requirements: '实习要求编辑',
        selfEvaluation: '实习生自我鉴定',
        internshipPurpose: '实习目的编辑',
        internshipContent: '实习内容编辑',
        internshipExperience: '实习经历编辑',
        internshipReflection: '实习体会编辑',
        workContent: '工作内容和要求编辑',
        workRecord: '工作记录编辑',
        personalGain: '个人收获编辑',
      };
      return titles[this.currentField] || '富文本编辑';
    },

    openEditor(field, item) {
      // ✅ item 可能是 task 或 evaluation
      if (!item) {
        console.error('❌ 数据为空，无法编辑');
        this.$message.error('数据加载中，请稍后重试');
        return;
      }

      // 保存当前字段和对象
      this.currentField = field;
      this.currentItem = item; // 统一用 currentItem

      // 根据 field 决定从哪个字段读取
      let content = '';

      if (field === 'selfEvaluation' || field === 'workContent' || field === 'workRecord' || field === 'personalGain') {
        // evaluation 类型
        content = item[field] || '';
      }
      else if (
        field === 'internshipPurpose' ||
        field === 'internshipContent' ||
        field === 'internshipExperience' ||
        field === 'internshipReflection'
      ) {
        content = item[field] || '';
      }
      else {
        // task 类型，如 objective, content, plan, requirements
        const fieldName = `internship${this.capitalize(field)}`;
        content = item[fieldName] || '';
      }

      this.editorContent = content;
      this.showEditor = true;

      this.$nextTick(() => {
        const el = this.$refs.richEditor;
        if (el) {
          el.innerHTML = this.editorContent;
          el.focus();
        }
      });
    },

    capitalize(str) {
      return str.charAt(0).toUpperCase() + str.slice(1);
    },

    closeEditor() {
      this.showEditor = false;
      this.currentField = '';
      this.currentItem = null;
      this.editorContent = '';
    },

    saveEditor() {
      if (!this.currentItem || !this.currentField) return;

      const content = this.$refs.richEditor.innerHTML;

      if (this.currentField === 'selfEvaluation' ||  this.currentField === 'workContent' || this.currentField === 'workRecord' || this.currentField === 'personalGain') {
        // 直接赋值
        this.$set(this.currentItem, this.currentField, content);
      }
      // 报告字段
      else if (
        this.currentField === 'internshipPurpose' ||
        this.currentField === 'internshipContent' ||
        this.currentField === 'internshipExperience' ||
        this.currentField === 'internshipReflection'
      ) {
        this.$set(this.currentItem, this.currentField, content);
      }
      else {
        // task 类型
        const fieldName = `internship${this.capitalize(this.currentField)}`;
        this.$set(this.currentItem, fieldName, content);
      }

      this.closeEditor();
    },

    // 计算企业评分项满分总和
    getCompanyMaxScore(evaluation) {
      if (!evaluation.hrmInternEvalScoreList) return 0;
      return evaluation.hrmInternEvalScoreList
        .filter(item => item.type === 'company')
        .reduce((sum, item) => sum + (parseFloat(item.maxScore) || 0), 0);
    },

    // 计算企业评分项实际得分总和
    getCompanyTotalScore(evaluation) {
      if (!evaluation.hrmInternEvalScoreList) return 0;
      const total = evaluation.hrmInternEvalScoreList
        .filter(item => item.type === 'company')
        .reduce((sum, item) => sum + (parseFloat(item.score) || 0), 0);
      return parseFloat(total.toFixed(2));
    },

    // 计算教师评分项满分总和
    getTeacherMaxScore(evaluation) {
      if (!evaluation.hrmInternEvalScoreTeacherList) return 0;
      return evaluation.hrmInternEvalScoreTeacherList
        .filter(item => item.type === 'teacher')
        .reduce((sum, item) => sum + (parseFloat(item.maxScore) || 0), 0);
    },

    // 计算教师评分项实际得分总和
    getTeacherTotalScore(evaluation) {
      if (!evaluation.hrmInternEvalScoreTeacherList) return 0;
      const total = evaluation.hrmInternEvalScoreTeacherList
        .filter(item => item.type === 'teacher')
        .reduce((sum, item) => sum + (parseFloat(item.score) || 0), 0);
      return parseFloat(total.toFixed(2));
    },

    calculateTotalScore(type) {
      let total = 0;
      // 计算指定 type 的总分
      this.evaluation.hrmInternEvalScoreList
        .filter(item => item.type === type)
        .forEach(item => {
          const score = parseFloat(item.score) || 0;
          total += score;
        });
      // 更新对应总分字段
      if (type === 'company') {
        this.evaluation.enterpriseTotalScore = total;
      } else if (type === 'teacher') {
        this.evaluation.teacherTotalScore = total;
      }

      // 计算综合总分
      this.evaluation.totalScore = parseFloat((
        (this.evaluation.enterpriseTotalScore + this.evaluation.teacherTotalScore) / 2
      ).toFixed(2));
    },

    // 获取实习生信息
    getList() {
      this.loading = true;
      const queryParams = {
        userId: store.getters.userId, //获取当前账号的userId
        pageNum: 1,
        pageSize: 1
      };

      // 第一步：通过当前登录人的userId获取实习生信息
      listIntern(queryParams).then(response => {
        this.internList = response.rows;

        if (!response.rows?.length) {
          this.$message.warning('未找到您的实习信息');
          this.loading = false;
          return;
        }

        // 只获取第一个实习生报告的信息
        const internInfo = response.rows[0];
        // 拿到实习生internId 去查询报告信息其他关联子表
        const internId = internInfo.internId;


        // 填充实习报告基础信息
        this.fillBasicInfo(internInfo);

        // 并行获取所有子表数据
        Promise.all([
          this.getInternshipLogs(internId),
          // 获取实习任务书
          this.getTaskData(internId),
          // 获取成绩鉴定表数据
          this.getEvaluationData(internId),
          this.getReportData(internId),

        ]).finally(() => {
          this.loading = false;
        });

      }).catch(error => {
        console.error('数据加载失败:', error);
        this.$message.error('数据加载失败: ' + error.message);
        this.loading = false;
      });
    },

// 填充基础信息方法
    fillBasicInfo(internInfo) {
      // 填充查询参数
      this.queryParams = {
        ...this.queryParams,
        studentName: internInfo.studentName || store.getters.nickName,
        studentNo: internInfo.studentNo,
        school: internInfo.school,
        degree: internInfo.degree,
        major: internInfo.major,
        className: internInfo.className,
        internshipCompany: internInfo.internshipCompany,
        internshipPosition: internInfo.internshipPosition,
        internshipStart: internInfo.internshipStart,
        internshipEnd: internInfo.internshipEnd,
        internshipPeriod: `${internInfo.internshipStart} 至 ${internInfo.internshipEnd}`,
        instructorTeacher: internInfo.instructorTeacher,
        enterpriseMentor: internInfo.enterpriseMentor
      };

      // 填充报告数据
      this.reportData = {
        ...this.reportData,
        internshipPurpose: internInfo.internshipPurpose,
        internshipContent: internInfo.internshipContent,
        internshipExperience: internInfo.internshipExperience,
        internshipReflection: internInfo.internshipReflection
      };

      this.logsData = {
        ...this.logsData,
        // date: `${internInfo.weekStartDate} 至 ${internInfo.weekEndDate}`,
        weekStartDate: internInfo.weekStartDate,
        weekEndDate: internInfo.weekEndDate,
        workContent: internInfo.workContent,
        workRecord: internInfo.workRecord,
        personalGain: internInfo.personalGain
      };

      this.taskData = {
        ...this.taskData,
        internshipObjective: internInfo.internshipObjective,
        internshipContent: internInfo.internshipContent,
        internshipPlan: internInfo.internshipPlan,
        internshipRequirements: internInfo.internshipRequirements
      };

      /*// 填充评价数据
      this.evaluationData = {
        ...this.evaluationData,
        studentName: internInfo.studentName || store.getters.nickName,
        studentId: internInfo.studentNo,
        major: internInfo.major,
        selfEvaluation: internInfo.selfEvaluation,
      };*/
    },

    // 获取实习报告数据
    getReportData(internId) {
      return listReport({
        internId: internId,
        pageNum: 1,
        pageSize: 10
      }).then(res => {

        if (res.rows && res.rows.length > 0) {
          const report = res.rows;

          // 填充实习报告数据
          this.reportData = res.rows.map(report => ({
            id: report.id,
            internshipPurpose: report.internshipPurpose || report.content || '暂无内容',
            internshipContent: report.internshipContent || report.content || '暂无内容',
            internshipExperience: report.internshipExperience || report.content || '暂无内容',
            internshipReflection: report.internshipReflection || report.content || '暂无内容'
          }));
          console.log("报告表详情：", this.reportData);

        } else {
          this.reportData = [{
            internshipPurpose: '',
            internshipContent: '',
            internshipExperience: '',
            internshipReflection: '',
          }];
          console.warn('未找到实习报告数据');
        }
        return res;
      }).catch(error => {
        console.error('获取实习报告失败:', error);
        this.$message.warning('实习报告加载失败');
        throw error;
      });
    },

// 获取实习日志
    getInternshipLogs(internId) {
      return listLog({
        internId: internId,
        pageNum: 1,
        pageSize: 10
      }).then(res => {

        if (res.rows && res.rows.length > 0) {
          const logs = res.rows;

          // 循环res.rows 填充实习报告数据date的值是吧${log.weekStartDate} 至 ${log.weekEndDate}
          // this.logsData = logs.map(log => ({
          //   ...log,
          //   date: `${log.weekStartDate} 至 ${log.weekEndDate}`
          // }))
          // 转换API数据格式为前端需要的格式
          this.logsData = res.rows.map(log => ({
            id: log.id,  // 保留ID以便后续操作
            // date: `${log.weekStartDate} 至 ${log.weekEndDate}`,
            weekStartDate: log.weekStartDate,
            weekEndDate: log.weekEndDate,
            workContent: log.workContent,
            workRecord: log.workRecord,
            personalGain: log.personalGain
          }));

        } else {
          this.logsData = [{
            // date: '',
            weekStartDate:  '',
            weekEndDate: '',
            workContent: '',
            workRecord: '',
            personalGain: ''
          }];
          console.warn('未找到实习日志数据');
        }
        return res;
      }).catch(error => {
        console.error('获取实习日志失败:', error);
        this.$message.warning('实习日志加载失败');
        throw error;
      });
    },

// 获取任务书数据
    getTaskData(internId) {
      return listTask({
        internId: internId,
        pageNum: 1,
        pageSize: 10
      }).then(res => {

        if (res.rows && res.rows.length > 0) {
          const task = res.rows;

          this.taskData = res.rows.map(task => ({
            id: task.id,
            internshipObjective: task.internshipObjective || task.content || '暂无内容',
            internshipContent: task.internshipContent || task.content || '暂无内容',
            internshipPlan: task.internshipPlan || task.content || '暂无内容',
            internshipRequirements: task.internshipRequirements || task.content || '暂无内容'
          }));
          console.log("任务书详情：", this.taskData);

        } else {
          this.taskData = [{
            internshipObjective: '',
            internshipContent: '',
            internshipPlan: '',
            internshipRequirements: ''
          }];
          console.warn('未找到任务书数据');
        }
        return res;
      }).catch(error => {
        console.error('获取任务书失败:', error);
        this.$message.warning('任务书加载失败');
        throw error;
      });
    },

   // 获取成绩鉴定表
    getEvaluationData(internId) {
       listInternEvaluation({ internId: internId }).then(res => {
        // 得到多长成绩鉴定表数据（但是列表里面没有查到具体的评分项）

        // 循环所有成绩鉴定表List，并获取鉴定表的详情
        for (let i = 0; i < res.rows.length; i++) {
          getInternEvaluation(res.rows[i].evaluationId).then(res => {
            // 把查到的评价详情赋值回成绩鉴定表List
            this.evaluationData.push(res.data) ;
            console.log("鉴定表详情：", this.evaluationData);
            console.log('企业评分项:', this.hrmInternEvalScoreList);
            console.log('教师评分项:', this.hrmInternEvalScoreTeacherList);
          });
        }

      }).catch(error => {
        console.error('获取评价数据失败:', error);
        throw error;
      });
    },
    addLog() {
      this.logsData.push({
        date: '',
        workContent: '',
        workRecord: '',
        personalGain: ''
      });
    },
    removeLog(index) {
      if (this.logsData.length > 1) {
        this.logsData.splice(index, 1);
      } else {
        alert('至少需要保留一篇日志');
      }
    },
    saveReport() {
      // 这里可以添加保存逻辑，如发送到后端或保存到本地存储
      alert('报告已保存')
    },
    printReport() {
      // 切换为打印视图
      this.isEditing = false;

      this.$nextTick(() => {
        const originalTitle = document.title;
        document.title = `${this.queryParams.studentName}的毕业实习报告`;

        // 获取要打印的区域
        const printArea = document.getElementById('printArea');
        if (!printArea) {
          alert('未找到 id 为 printArea 的元素');
          this.isEditing = true;
          return;
        }

        // 保存原始 body 内容
        const originalBody = document.body.innerHTML;

        // 创建打印用的 HTML 字符串，并同步 input 的当前值
        const tempContainer = document.createElement('div');
        tempContainer.appendChild(printArea.cloneNode(true));

        // 同步所有 input 的 value 到 outerHTML
        const inputs = tempContainer.querySelectorAll('input');
        inputs.forEach(input => {
          input.setAttribute('value', input.value); // 关键：把运行时 value 写入 HTML 属性
        });

        // 同步 contenteditable 或其他可编辑元素（如有）
        const editables = tempContainer.querySelectorAll('[contenteditable]');
        editables.forEach(el => {
          el.innerHTML = el.innerHTML; // 确保内容同步
        });

        // 替换 body 内容
        document.body.innerHTML = tempContainer.innerHTML;

    //     // 添加基础样式（可选：让打印更清晰）
    //     const style = document.createElement('style');
    //     style.textContent = `
    //   body {
    //     font-family: "SimSun", "宋体", serif;
    //     font-size: 12pt;
    //     margin: 2cm;
    //   }
    //   table {
    //     border-collapse: collapse;
    //     width: 100%;
    //   }
    //   td, th {
    //     border: 1px solid #000;
    //     padding: 8px;
    //   }
    //   .display-text, input {
    //     border-bottom: 1px solid #000;
    //     padding: 4px 0;
    //   }
    // `;
    //     document.head.appendChild(style);

        // 触发打印
        window.print();

        // ⚠️ 立即恢复页面（防止用户操作）
        document.body.innerHTML = originalBody;
        document.title = originalTitle;
        this.isEditing = true; // 恢复编辑状态

        // // 重新插入 style（避免内存泄漏）
        // if (style.parentNode) {
        //   style.parentNode.removeChild(style);
        // }
      });
    }
  }
}
</script>

<style scoped>
.date-input {
  display: flex;
  align-items: center;
  gap: 5px;
}

.date-field {
  border: 1px solid #ddd;
  padding: 5px 8px;
  border-radius: 3px;
  width: 80px;
  text-align: center;
}

.input-field {
  border: none;
  border-bottom: 1px solid #000;
  outline: none;
  background: transparent;
  font-size: 16px;
  width: 250px;
  padding: 5px 0;
}

.display-text {
  display: inline-block;
  width: 250px;
  min-height: 20px;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
  margin-left: 10px;
  font-size: 16px;
  color: #333;
  text-align: left;
}

.internship-report {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  /*text-align: center;*/
}

.report-header {
  text-align: center;
  margin-bottom: 100px;
}

.info-container {
  width: 100%;
  max-width: 800px; /* 控制最大宽度，避免过宽 */
  margin-top: 200px;
  margin-bottom: 100px;
  padding: 20px;
  box-sizing: border-box;
}

.info-section {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center; /* 子项居中对齐 */
  margin-bottom: 50px;
}

.info-item {
  display: flex;
  align-items: center;
  min-width: 250px; /* 控制每个项的最小宽度 */
  font-size: 16px;
}

.info-item label {
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

.input-field, .display-text {
  flex: 1;
  border: none;
  border-bottom: 1px solid #000;
  padding: 5px 0;
  font-size: 16px;
  background: transparent;
}

.display-text {
  border-bottom: 1px solid #000;
  min-height: 24px;
  padding: 5px 0;
}

.info-item input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  width: calc(100% - 130px);
  padding: 5px 0;
}

.report-footer {
  text-align: center;
  margin-top: 100px;
}

/*.info-item::after {*/
/*  content: '';*/
/*  display: block;*/
/*  width: calc(100% - 130px); !* 减去标签宽度及间距 *!*/
/*  height: 1px;*/
/*  background-color: #000;*/
/*  margin-top: 5px;*/
/*}*/

.internship-report {
  font-family: "Microsoft YaHei", "SimSun", sans-serif;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.report-header {
  text-align: center;
  margin-bottom: 30px;
}

.report-header h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.info-item label {
  width: 80px;
  font-weight: bold;
}

.info-item input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.task-book {
  margin-bottom: 30px;
}

.task-book h2 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 15px;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}

.task-table td {
  border: 1px solid #000;
  padding: 8px;
}

.task-table input[type="text"] {
  width: 100%;
  padding: 5px;
  border: none;
  box-sizing: border-box;
}

.task-table textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  resize: vertical;
  min-height: 60px;
}

.section-title {
  font-weight: bold;
  text-align: left;
  font-size: 14pt;
  background-color: #ffffff;
  height: auto;
}

.report-content {
  margin-bottom: 30px;
}

.report-content h2 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 15px;
}

.section h3 {
  font-size: 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.subsection h4 {
  font-size: 16px;
  margin-bottom: 8px;
}

textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  resize: vertical;
  min-height: 80px;
}

.internship-logs {
  margin-bottom: 30px;
}

.internship-logs h2 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 15px;
}

.log h3 {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 15px;
}

.log-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.actions {
  text-align: center;
  margin-top: 30px;
}

button {
  padding: 8px 15px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 10px;
}

button:hover {
  background-color: #40a9ff;
}

.evaluation-form {
  margin-bottom: 30px;
}

.evaluation-form h2 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 15px;
}

.evaluation-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}

.evaluation-table td {
  border: 1px solid #000;
  padding: 8px;
}

.evaluation-table input[type="text"] {
  width: 100%;
  padding: 5px;
  border: none;
  box-sizing: border-box;
}

.evaluation-table textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  resize: vertical;
  min-height: 60px;
}

.assessment-item {
  margin-bottom: 10px;
}

.signature-line {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.signature-box {
  border-bottom: 1px solid #000;
  width: 150px;
  display: inline-block;
  text-align: center;
}

.note {
  font-size: 12px;
  color: #666;
  margin: 5px 0;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
  margin-bottom: 20px;
}

.report-table td {
  border: 1px solid #000;
  padding: 8px;
}

.report-table input[type="text"] {
  width: 100%;
  padding: 5px;
  border: none;
  box-sizing: border-box;
}

.report-table textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  resize: vertical;
  min-height: 60px;
}

.report-table h4 {
  margin: 10px 0 5px 0;
  font-size: 16px;
}
.log-container {
  margin-bottom: 30px;
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 5px;
  position: relative;
}
.log-container h3 {
  margin-top: 0;
  color: #1890ff;
}
.delete-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.delete-btn:hover {
  background-color: #ff7875;
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
  margin-bottom: 15px;
}

.log-table td {
  border: 1px solid #000;
  padding: 8px;
}

.log-table input[type="text"] {
  width: calc(100% - 80px);
  margin-left: 10px;
  padding: 5px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

.log-table textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  resize: vertical;
  min-height: 80px;
}

.log-table strong {
  font-weight: bold;
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
  margin-bottom: 20px;
}

.info-table td {
  border: 1px solid #000;
  padding: 8px;
  width: 25%;
}

.info-table td:nth-child(odd) {
  font-weight: bold;
  background-color: #f5f5f5;
  width: 15%;
}

.info-table input[type="text"] {
  width: 100%;
  padding: 5px;
  border: none;
  box-sizing: border-box;
}

/* 成绩等级行整体样式 */
.grade-row {
  padding: 15px 10px;
  background-color: #f9f9f9;
}

/* 水平排列成绩和等级 */
.form-inline-group {
  display: flex;
  gap: 30px; /* 两个字段之间的间距 */
  align-items: center;
  font-size: 14px;
  color: #333;
}

.form-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.form-item label {
  width: 50px;
  text-align: right;
  margin-right: 8px;
  font-weight: bold;
}

.short-input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

.short-input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 4px rgba(64, 158, 255, 0.3);
}

/* 签名区域右对齐 */
.signature-area {
  text-align: right;
  margin-top: 10px;
}

.signature-line {
  display: inline-block;
  padding: 0 10px;
  border-top: 1px solid #000;
  min-width: 180px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

.signature-line {
  display: inline-block;
  /* min-width: 200px; */
  border-top: 1px solid #000;
  padding-top: 6px;
  white-space: nowrap;
}

.signature-line span {
  margin-right: 5px;
}

.signature-box {
  font-style: italic;
  color: #666;
  padding: 0 8px;
}

.assessment-item {
  margin-bottom: 30px;
  font-size: 14px;
}

/* 左右签名行布局 */
.signature-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 14px;
  color: #333;
}

/* 左侧签名：负责人 */
.signature-left {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.signature-left span:first-child {
  margin-right: 8px;
}

.underline {
  display: inline-block;
  width: 180px;
  border-bottom: 1px solid #000;
  margin-bottom: 4px;
}

/* 右侧盖章 */
.signature-right {
  text-align: right;
}

.signature-box {
  display: inline-block;
  width: 120px;
  border-bottom: 1px solid #000;
  margin-bottom: 4px;
  text-align: center;
  font-style: italic;
  color: #666;
}

.page-break {
  page-break-after: always;
}

@media screen {
  .page-break {
    border-bottom: 1px dashed #ccc;
    margin: 20px 0;
    height: 0;
  }
}

/* A4纸尺寸设置 */
@page {
  size: A4;
  margin: 0;
}


/* 模拟 textarea 的 div */
.fake-textarea {
  min-height: 80px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  line-height: 1.5;
  font-size: 14px;
  color: #333;
  overflow: auto;
  white-space: pre-wrap; /* 保留换行 */
  word-wrap: break-word;
}

/* 点击态 */
.fake-textarea.clickable {
  cursor: pointer;
  transition: border-color 0.2s;
}

.fake-textarea.clickable:hover {
  border-color: #999;
}

.fake-textarea.clickable:focus {
  border-color: #409eff;
  outline: none;
}

/* 为空时的提示文字 */
.fake-textarea:empty::before {
  content: attr(placeholder);
  color: #999;
  font-style: italic;
}

textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  cursor: pointer;
  background-color: #f9f9f9;
  color: #555;
}

textarea:hover {
  border-color: #999;
}

/* 弹窗遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 弹窗内容 */
.modal-content {
  background: white;
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.modal-content h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

/* 富文本编辑区 */
.rich-text-editor {
  border: 1px solid #ccc;
  min-height: 200px;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 6px;
  line-height: 1.6;
  overflow-y: auto;
  background: white;
}

.rich-text-editor:focus {
  outline: 2px solid #409eff;
  border-color: #409eff;
}

/* 弹窗按钮 */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-footer button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-footer button:first-child {
  background: #eee;
}

.modal-footer button:last-child {
  background: #409eff;
  color: white;
}

/* 预览区域 */
.preview {
  margin-top: 20px;
  padding: 15px;
  border: 1px dashed #ccc;
  border-radius: 6px;
  background-color: #f8f8f8;
}

.preview h5 {
  margin-top: 10px;
  color: #333;
}

/* 确保 v-html 渲染的列表正常显示 */
.preview ul,
.preview ol {
  margin: 10px 0;
  padding-left: 20px;
}

.preview li {
  margin: 4px 0;
}

.section-title > div:first-child {
  margin-bottom: 8px; /* 调整标题和内容之间的间距 */
}

/* 打印样式：只打印 #printArea 区域 */
@media print {
  body {
    font-family: "SimSun", "宋体", serif !important;
    font-size: 14pt; /* 正文小四号 */
    line-height: 1.5; /* 文档行距约1.5倍 */
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
  }

  /* 报告标题：方正小标宋简体，二号，居中 */
  .report-header h1 {
    font-family: "FZXiaoBiaoSong-B05S", "方正小标宋简体", "SimSun", "宋体", serif;
    font-size: 22pt; /* 二号字 ≈ 22pt */
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
  }

  /* 信息区域整体：宋体，四号 */
  .info-section {
    font-family: "SimSun", "宋体", serif;
    font-size: 14pt; /* 四号字 ≈ 14pt */
    line-height: 1.8;
  }

  /* 每个信息项 */
  .info-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .info-item label {
    font-weight: bold;
    font-size: 14pt;
    min-width: 100px; /* 可根据需要调整标签宽度 */
  }

  /* 显示文本（带下划线） */
  .display-text {
    font-family: "SimSun", "宋体", serif;
    font-size: 14pt; /* 四号 */
    flex: 1;
    border-bottom: 1px solid #000;
    padding-left: 8px;
    margin-left: 4px;
    min-height: 1.2em;
  }

  /* 页脚：宋体，小三，居中 */
  .report-footer {
    font-family: "SimSun", "宋体", serif;
    font-size: 15pt; /* 小三 ≈ 15pt */
    text-align: center;
    margin-top: 80px;
    font-weight: normal;
  }

  .section-title > div:first-child {
    margin-bottom: 8px; /* 调整标题和内容之间的间距 */
  }

  .task-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "SimSun", "宋体", serif;
    font-size: 14pt;
    table-layout: fixed;
  }

  .task-table td {
    border: 1px solid #000;
    padding: 8px;
    vertical-align: top;
    word-wrap: break-word;
  }

  .task-table td:nth-child(odd) { /* 假设标签在奇数列 */
    width: 15%; /* 调整为适合的比例 */
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
  }

  .task-table td:nth-child(even) {
    width: auto;
  }

  .evaluation-form {
    width: 100%;
    font-family: "SimSun", "宋体", serif;
    font-size: 14pt;
  }

  .evaluation-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 固定表格布局，便于控制列宽 */
  }

  .evaluation-table td {
    border: 1px solid #000;
    padding: 8px;
    vertical-align: top;
    word-wrap: break-word;
  }

  /* 标签列宽度固定比例，适应内容 */
  .evaluation-table td:nth-child(odd) { /* 假设标签在奇数列 */
    width: 15%; /* 调整为适合的比例 */
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
  }

  /* 输入框列自动填充剩余空间 */
  .evaluation-table td:nth-child(even) {
    width: auto;
  }

  .report-content {
    width: 100%;
    font-family: "SimSun", "宋体", serif;
    font-size: 14pt;
    margin: 0;
    padding: 0;
  }

  .report-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 关键：固定列宽 */
    margin: 0;
    font-family: "SimSun", "宋体", serif;
    font-size: 14pt;
  }

  .report-table td {
    border: 1px solid #000;
    padding: 10px 8px; /* 上下留空，便于阅读和填写 */
    vertical-align: top;
    word-wrap: break-word; /* 长内容自动换行 */
    line-height: 1.6;
  }

  /* 设置标签列（如“姓名”“学号”）宽度 */
  .report-table td:nth-child(odd) {
    width: 15%;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    background-color: #f9f9f9;
    padding-right: 10px;
  }

  /* 输入列（偶数列）自动填充剩余空间 */
  .report-table td:nth-child(even) {
    width: auto;
  }

  .log-container {
    border: none;
    padding: 0;
    background-color: transparent;
  }

  .log-container h3 {
    display: none;
  }

  .log-table {
    border-collapse: collapse;
    table-layout: fixed;
  }

  .log-table td strong {
    font-family: "SimSun", "宋体", serif;  /* 宋体 */
    font-size: 14pt;                      /* 小四 ≈ 14pt */
    font-weight: bold;                    /* 加粗（strong 默认已加粗，再写一次更保险） */
    line-height: 1.5;
  }

  .log-table td {
    font-family: "SimSun", "宋体", serif;
    font-size: 14pt;
    line-height: 1.6;
  }

  .label-cell {
    width: 18%;
    text-align: left;
    padding-right: 8px;
    white-space: nowrap;
  }

  /* 输入框列自动填充剩余空间 */
  .task-table td:not(.label-cell) {
    width: auto;
  }

  .section-title {
    font-weight: bold;
    text-align: left;
    font-size: 14pt;
    background-color: #ffffff;
    height: auto;
  }

  .fake-textarea {
    font-family: "SimSun", "宋体", serif;
    font-size: 14pt;
    line-height: 1.5;
    min-height: 100px;
    border: none;
    outline: none;
    resize: none;
    cursor: pointer;
  }

  .fake-textarea.clickable:hover {
    background-color: #f0f0f0;
  }

  /* 输入框统一风格 */
  input[type="text"] {
    font-family: "SimSun", "宋体", serif;
    font-size: 13pt;
    border: none;
    border-bottom: 1px solid #000;
    width: 100%;
    padding: 0 4px;
    outline: none;
    background: transparent;
  }

  .date-input {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .date-field {
    border: 1px solid #ddd;
    padding: 5px 8px;
    border-radius: 3px;
    width: 80px;
    text-align: center;
  }

  /* 设置 A4 纸张 */
  @page {
    size: A4;
    margin: 2.5cm; /* 页边距 */
  }

  /* 避免分页断裂 */
  #printArea {
    page-break-inside: avoid;
  }

  /* 隐藏不需要打印的按钮 */
  .edit-btn,
  .add-btn,
  .delete-btn,
  .print-btn {
    display: none !important;
  }

  input {
    border: none !important;
    background: transparent !important;
  }
  textarea {
    border: none !important;
    background: transparent !important;
  }
  .fake-textarea {
    border: none !important;
  }
  /* 统一所有表格边框样式 */
  table,
  .task-table,
  .evaluation-table,
  .report-table,
  .log-table {
    border: 1px solid #000 !important; /* 强制黑色实线边框 */
  }

}
</style>
